<template>
    <div id="login" v-loading="loading">
    <div class="divHead">登录</div>
    <div class="divContainer">
        <el-input placeholder=" 请输入手机号码" v-model="form.phone"  maxlength='20'/>
        <div class="divSplit"></div>
        <el-input placeholder=" 请输入验证码" v-model="form.code"  maxlength='20'/>
        <span  @click='getCode' v-if="sendcodestatus">获取验证码</span>
        <span v-if="time!=0">{{time}}</span>
    </div>
    <div class="divMsg" v-if="msgFlag">手机号输入不正确，请重新输入</div>
    <el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">登录</el-button>
        </div>
</template>
<script src="../assets/js/base.js"></script>
<script>
import axios from 'axios'
import router from '@/router'
import{  
  loginApi,logoutApi,sendMsgApi
}  from '../assets/api/login'
import {base} from '../assets/js/base'
export default {
  
            name:"login",
            data(){
                return {
                    form:{
                        phone:'17353822192',
                        code:''
                    },
                    msgFlag:false,
                    loading:false,
                    sendcodestatus:true,
                    time:0
                }
            },
            computed:{},
            created(){base(document,window)},
            mounted(){},
            methods:{
                getCode(){
                    var _this = this
                    this.form.code = '';
                    const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
                    if (regex.test(this.form.phone)) {//手机号规则正则判断
                        this.msgFlag = false;
                        // this.form.code = (Math.random()*1000000).toFixed(0);//随机生成验证码放入表单
                        sendMsgApi({phone:this.form.phone}).then(res=>{
                            //这两行为测试专用
                            _this.$message.success("您的验证码为："+res.data.data)
                            _this.form.code = res.data.data

                            // 把发送验证码这个文字隐藏
                            _this.sendcodestatus = false
                            // 定时器循环次数
                            var i = 60
                            var interval = setInterval(function (){
                                i--
                                _this.time = i
                                // 如果i==0 就清空定时器 并且把发送按钮显示出来
                                if(i==0){
                                    clearInterval(interval)
                                    _this.sendcodestatus = true
                                }
                            },1000);
                        })
                    }else{
                        this.msgFlag = true
                    }
                },
                async btnLogin(){
                    if(this.form.phone && this.form.code){
                        this.loading = true;
                        //调用后台登录API，把phone和code传到后台
                        const res = await loginApi({phone:this.form.phone,code:this.form.code});
                        this.loading = false;
                        if(res.data.code === 1){
                            sessionStorage.setItem("userInfo",JSON.stringify(res.data.data));
                            sessionStorage.setItem("access_token",res.headers.authorization);
                            window.requestAnimationFrame(()=>{
                              router.push('/home')
                            })                           
                        }else{
                            this.$notify({ type:'warning', message:res.data.msg});
                        }
                    }else{
                        this.$notify({ type:'warning', message:'请输入手机号码'});
                    }
                },
//                  base (doc, win) {
//                 var docEl = doc.documentElement,
//                     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
//                     recalc = function () {
//                         var clientWidth = docEl.clientWidth;
//                         if (!clientWidth) return;
//                         if (clientWidth > 750) {
//                             docEl.style.fontSize = '28px';
//                         } else {
//                             docEl.style.fontSize = (clientWidth / 375) + 'px';
//                         }
//                     };

//                 if (!doc.addEventListener) return;
//                 win.addEventListener(resizeEvt, recalc, false);
//                 doc.addEventListener('DOMContentLoaded', recalc, false);
// },
            }
    
}
</script>

<style>
@import url(../assets/styles/index.css);
@import url(../assets/styles/login.css);
@import url(../assets/styles/vant.min.css);
</style>